<template>
	<view>
		<my-search @myclick="toSearch"></my-search>
		<!-- 轮播图 -->
		<view class="container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
				class="swiper-box">
				<swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-img"
					@tap="ToGood_deail(item.goods_id)">
					<view class="swiper-item">
						<!-- 动态绑定图片的 src 属性 -->
						<image :src="item.image_src"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类导航 -->
		<view class="nva-list">
			<view class="nav" v-for="(item,index) in NavigationList" :key="index" @click="navClickHandler(item)">
				<image :src="item.image_src"></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view>
			<view v-for="(item,index) in FloorImgList" :key="index">
				<image :src="item.floor_title.image_src" class="floor_title_img" mode="aspectFit"></image>
				<view class="Floor_list">
					<navigator class="Floor_right_img" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src"></image>
					</navigator>
					<view class="floor_flex">
						<navigator :url="item.product_list[1].url">
						<image :src="item.product_list[1].image_src"></image>
						</navigator>
						<navigator :url="item.product_list[2].url">
						<image :src="item.product_list[2].image_src"></image>
						</navigator>
					</view>
					<view class="floor_flex">
						<navigator :url="item.product_list[3].url">
						<image :src="item.product_list[3].image_src"></image>
						</navigator>
						<navigator :url="item.product_list[4].url">
						<image :src="item.product_list[4].image_src"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import badgMix from '../../mixins/tabbar-badge.js'
	export default {
		mixins:[badgMix],
		data() {
			return {
				swiperList: [],
				NavigationList: [],
				FloorImgList: []
			};
		},
		onLoad() {
			this.getSwiperList()
			this.getNavigation()
			this.getFloorImgList()
		},
		methods: {
			// 轮播图
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.get('/home/swiperdata')
				if (res.meta.status !== 200) return uni.$showMsg()
				this.swiperList = res.message
				uni.$showMsg("数据请求成功")
			},
			//分类导航
			async getNavigation() {
				const {
					data: res
				} = await uni.$http.get('/home/catitems')
				if (res.meta.status !== 200) return uni.$showMsg()
				this.NavigationList = res.message
			},
			//获取楼层
			async getFloorImgList() {
				const {
					data: res
				} = await uni.$http.get('/home/floordata')
				console.log(res);
				if (res.meta.status !== 200) return uni.$showMsg()
				res.message.forEach(item=>{
					item.product_list.forEach(pro=>{
						pro.url="/subpkg/Good_list/Good_list?"+pro.navigator_url.split("?")[1]
					})
				})
				this.FloorImgList = res.message
			},
			//轮播图点击跳转
			ToGood_deail(goods_id) {
				uni.navigateTo({
					url: `/subpkg/goods_detail/goods_detail?goods_id=${goods_id}`
				})
			},
			//导航点击判断
			navClickHandler(item) {
				if (item.name === '分类') {
					uni.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},
			toSearch(){
				console.log("123");
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			}
		}
	}
</script>

<style scoped>
	.swiper-box {
		height: 330rpx;
	}

	.swiper-item {
		height: 100%;
		width: 100%;
	}

	.swiper-img image {
		width: 100%;
		height: 100%;
	}

	.nva-list {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
	}

	.nav image {
		width: 150rpx;
		height: 150rpx;
	}

	.floor_title_img {
		width: 100%;
		height: 100rpx;
	}
	.Floor_list{
		display: flex;
		justify-content: space-around;
	}
	.Floor_right_img image{
		width: 230rpx;
	}
	.floor_flex{
		display: flex;
		flex-direction: column;
		width: 230rpx;
		justify-content: space-between;
	}
	.floor_flex image{
		width: 100%;
		height: 230rpx;
	}
</style>
